<template>
  <div>
    <el-button class="margin-right" type="text" icon="el-icon-refresh" @click="refreshConnects" />

    <el-select :value="value" size="small" clearable filterable @change="switchConnect">
      <el-option v-for="connect in connects" :key="connect" :value="connect" :label="connect" />
    </el-select>

    <el-button type="text" class="margin-left" icon="el-icon-edit" size="small" @click="createConnect">新建</el-button>
  </div>
</template>

<script>
import core from '@/api/core'

export default {
  name: 'ConnectChose',
  props: {
    module: String,
    value: String
  },
  model: {
    prop:'value',
    event: 'change'
  },
  data(){
    return {
      connects: [],
      choseConnect: null,
    }
  },
  mounted() {
    this.refreshConnects()
  },
  methods: {
    createConnect(){
      window.location.hash = '/core/connect'
    },
    refreshConnects(){
      core.security.moduleConnectNames(this.module).then(res => {
        this.connects = res.data
        if (this.connects && this.connects.length > 0){
          this.switchConnect(this.connects[0])
        }
      })
    },
    switchConnect(value){
      this.choseConnect = value
      this.$emit('change',value)
    },
    getChoseConnect(){
      return this.choseConnect
    }
  },
  watch: {
    value: {
      handler(value){
        this.choseConnect = value
      }
    }
  }
}
</script>


